<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>精美侧边栏菜单 - 多级菜单与动画效果</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-family: 'Arial', sans-serif;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px;
    }
    /* 控制面板 */
    .control-panel {
      width: 100%;
      max-width: 800px;
      background: rgba(255, 255, 255, 0.95);
      border-radius: 20px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
      padding: 20px;
      margin-bottom: 30px;
    }
    .control-title {
      color: #333;
      font-size: 18px;
      margin-bottom: 15px;
      font-weight: 600;
    }
    .animation-options {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .option-btn {
      padding: 8px 15px;
      background: #f0f0f0;
      border: 2px solid #ddd;
      border-radius: 25px;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.3s ease;
    }
    .option-btn:hover {
      background: #e0e0e0;
    }
    .option-btn.active {
      background: #667eea;
      color: white;
      border-color: #667eea;
    }
    /* 侧边栏容器 */
    .sidebar-container {
      display: flex;
      width: 100%;
      max-width: 800px;
      background: rgba(255, 255, 255, 0.95);
      border-radius: 20px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
      overflow: hidden;
    }
    /* 侧边栏导航 */
    .sidebar-nav {
      width: 250px;
      background: linear-gradient(180deg, #2c3e50 0%, #1a2530 100%);
      padding: 10px 0;
      position: relative;
      min-height: 500px;
    }
    /* 侧边栏菜单项容器 */
    .sidebar-menu {
      position: relative;
      z-index: 2;
    }
    /* 侧边栏菜单项 */
    .sidebar-item {
      display: block;
      padding: 15px 20px;
      color: rgba(255, 255, 255, 0.7);
      text-decoration: none;
      font-weight: 600;
      font-size: 16px;
      transition: all 0.3s ease;
      cursor: pointer;
    }
    .sidebar-item:hover {
      color: rgba(255, 255, 255, 0.9);
      background: rgba(255, 255, 255, 0.1);
    }
    .sidebar-item.active {
      color: white;
    }
    /* 子菜单项样式 */
    .sidebar-subitem {
      display: block;
      padding: 12px 20px 12px 40px;
      color: rgba(255, 255, 255, 0.6);
      text-decoration: none;
      font-weight: 500;
      font-size: 14px;
      transition: all 0.3s ease;
    }
    .sidebar-subitem:hover {
      color: rgba(255, 255, 255, 0.9);
      background: rgba(255, 255, 255, 0.05);
    }
    .sidebar-subitem.active {
      color: white;
    }
    /* 子菜单容器 */
    .submenu {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease-out;
    }
    .submenu.open {
      max-height: 500px;
    }
    /* 子菜单图标 */
    .submenu-icon {
      float: right;
      transition: transform 0.3s ease;
    }
    .submenu.open .submenu-icon {
      transform: rotate(180deg);
    }
    /* 滑动背景效果 - 默认使用easeInOutQuad */
    .sidebar-slider {
      position: absolute;
      width: calc(100% - 20px);
      background: rgba(255, 255, 255, 0.2);
      border-radius: 8px;
      transition: all 0.4s ease; /* 默认使用ease */
      z-index: 1;
      top: 10px;
      left: 10px;
    }
    /* 不同的动画效果类 */
    .sidebar-slider.ease {
      transition: all 0.4s ease;
    }
    .sidebar-slider.ease-in {
      transition: all 0.4s ease-in;
    }
    .sidebar-slider.ease-out {
      transition: all 0.4s ease-out;
    }
    .sidebar-slider.ease-in-out {
      transition: all 0.4s ease-in-out;
    }
    .sidebar-slider.linear {
      transition: all 0.4s linear;
    }
    .sidebar-slider.ease-in-quad {
      transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    }
    .sidebar-slider.ease-in-cubic {
      transition: all 0.4s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    .sidebar-slider.ease-in-quart {
      transition: all 0.4s cubic-bezier(0.895, 0.03, 0.685, 0.22);
    }
    .sidebar-slider.ease-out-quad {
      transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    .sidebar-slider.ease-out-cubic {
      transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    .sidebar-slider.ease-out-quart {
      transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    }
    .sidebar-slider.ease-in-out-quad {
      transition: all 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    }
    .sidebar-slider.ease-in-out-cubic {
      transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    }
    .sidebar-slider.ease-in-out-quart {
      transition: all 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    }
    .sidebar-slider.ease-in-out-quint {
      transition: all 0.4s cubic-bezier(0.86, 0, 0.07, 1);
    }
    .sidebar-slider.elastic {
      transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }
    /* 内容区域 */
    .content-area {
      flex: 1;
      padding: 30px;
    }
    .content-pane {
      display: none;
    }
    .content-pane.active {
      display: block;
      animation: fadeIn 0.6s ease-in-out;
    }
    .content-title {
      color: #333;
      font-size: 24px;
      margin-bottom: 15px;
      font-weight: 700;
    }
    .content-text {
      color: #666;
      line-height: 1.6;
      font-size: 16px;
    }
    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    /* 响应式设计 */
    @media (max-width: 768px) {
      .sidebar-container {
        flex-direction: column;
      }
      .sidebar-nav {
        width: 100%;
      }
      .animation-options {
        flex-direction: column;
      }
    }
  </style>
</head>
<body>
<!-- 动画控制面板 -->
<div class="control-panel">
  <h3 class="control-title">选择滑动动画效果：</h3>
  <div class="animation-options">
    <div class="option-btn active" data-effect="ease">ease（默认）</div>
    <div class="option-btn" data-effect="ease-in">ease-in</div>
    <div class="option-btn" data-effect="ease-out">ease-out</div>
    <div class="option-btn" data-effect="ease-in-out">ease-in-out</div>
    <div class="option-btn" data-effect="linear">linear</div>
    <div class="option-btn" data-effect="ease-in-quad">ease-in-quad</div>
    <div class="option-btn" data-effect="ease-in-cubic">ease-in-cubic</div>
    <div class="option-btn" data-effect="ease-in-quart">ease-in-quart</div>
    <div class="option-btn" data-effect="ease-out-quad">ease-out-quad</div>
    <div class="option-btn" data-effect="ease-out-cubic">ease-out-cubic</div>
    <div class="option-btn" data-effect="ease-out-quart">ease-out-quart</div>
    <div class="option-btn" data-effect="ease-in-out-quad">ease-in-out-quad</div>
    <div class="option-btn" data-effect="ease-in-out-cubic">ease-in-out-cubic</div>
    <div class="option-btn" data-effect="ease-in-out-quart">ease-in-out-quart</div>
    <div class="option-btn" data-effect="ease-in-out-quint">ease-in-out-quint</div>
    <div class="option-btn" data-effect="elastic">elastic（弹性）</div>
  </div>
</div>

<!-- 侧边栏容器 -->
<div class="sidebar-container">
  <!-- 侧边栏导航 -->
  <nav class="sidebar-nav">
    <div class="sidebar-menu">
      <a href="#" class="sidebar-item active" data-pane="home">
        首页
      </a>
      <a href="#" class="sidebar-item" data-pane="about">
        关于我们
      </a>
      <div class="sidebar-item" data-submenu="services">
        服务项目
        <span class="submenu-icon">▼</span>
      </div>
      <div class="submenu" id="services-submenu">
        <a href="#" class="sidebar-subitem" data-pane="web-design">网页设计</a>
        <a href="#" class="sidebar-subitem" data-pane="app-development">应用开发</a>
        <a href="#" class="sidebar-subitem" data-pane="seo">SEO优化</a>
      </div>
      <div class="sidebar-item" data-submenu="products">
        产品中心
        <span class="submenu-icon">▼</span>
      </div>
      <div class="submenu" id="products-submenu">
        <a href="#" class="sidebar-subitem" data-pane="software">软件产品</a>
        <a href="#" class="sidebar-subitem" data-pane="hardware">硬件设备</a>
        <a href="#" class="sidebar-subitem" data-pane="consulting">咨询服务</a>
      </div>
      <a href="#" class="sidebar-item" data-pane="contact">
        联系我们
      </a>
    </div>
    <div class="sidebar-slider ease" id="sidebarSlider"></div>
  </nav>

  <!-- 内容区域 -->
  <div class="content-area">
    <div class="content-pane active" id="home-pane">
      <h2 class="content-title">欢迎来到首页</h2>
      <p class="content-text">
        这是一个精美的侧边栏菜单组件，具有多级菜单结构和多种流畅的动画效果。您可以选择不同的动画效果来体验不同的滑动感受。
      </p>
      <p class="content-text" style="margin-top: 15px;">
        当前使用的是 <strong>ease</strong> 动画效果，这是一种平滑且自然的过渡效果，没有弹性回弹，非常适合大多数应用场景。
      </p>
    </div>
    <div class="content-pane" id="about-pane">
      <h2 class="content-title">关于我们</h2>
      <p class="content-text">
        我们致力于创造美观、实用且用户友好的网页组件。这个侧边栏菜单组件是我们精心设计的作品之一，
        它展示了现代Web开发的技术和美学。
      </p>
      <p class="content-text" style="margin-top: 15px;">
        通过使用CSS的transform和transition属性，我们实现了流畅的动画效果。JavaScript负责处理
        用户交互和状态管理，确保组件的响应性和可靠性。
      </p>
    </div>
    <div class="content-pane" id="web-design-pane">
      <h2 class="content-title">网页设计服务</h2>
      <p class="content-text">
        我们提供专业的网页设计服务，包括响应式设计、用户体验优化和视觉设计。
      </p>
      <ul class="content-text" style="margin-top: 15px; padding-left: 20px;">
        <li>企业官网设计</li>
        <li>电商平台设计</li>
        <li>移动端网页设计</li>
        <li>UI/UX设计</li>
      </ul>
    </div>
    <div class="content-pane" id="app-development-pane">
      <h2 class="content-title">应用开发服务</h2>
      <p class="content-text">
        我们提供全平台的应用开发服务，包括Web应用、移动应用和桌面应用。
      </p>
      <ul class="content-text" style="margin-top: 15px; padding-left: 20px;">
        <li>iOS应用开发</li>
        <li>Android应用开发</li>
        <li>跨平台应用开发</li>
        <li>后端服务开发</li>
      </ul>
    </div>
    <div class="content-pane" id="seo-pane">
      <h2 class="content-title">SEO优化服务</h2>
      <p class="content-text">
        我们提供专业的搜索引擎优化服务，帮助您的网站获得更好的排名和更多的流量。
      </p>
      <ul class="content-text" style="margin-top: 15px; padding-left: 20px;">
        <li>关键词优化</li>
        <li>内容优化</li>
        <li>技术SEO</li>
        <li>数据分析与报告</li>
      </ul>
    </div>
    <div class="content-pane" id="software-pane">
      <h2 class="content-title">软件产品</h2>
      <p class="content-text">
        我们提供多种高质量的软件产品，满足不同行业和企业的需求。
      </p>
      <ul class="content-text" style="margin-top: 15px; padding-left: 20px;">
        <li>企业管理系统</li>
        <li>客户关系管理(CRM)</li>
        <li>内容管理系统(CMS)</li>
        <li>数据分析工具</li>
      </ul>
    </div>
    <div class="content-pane" id="hardware-pane">
      <h2 class="content-title">硬件设备</h2>
      <p class="content-text">
        我们提供专业的硬件设备解决方案，包括服务器、网络设备和终端设备。
      </p>
      <ul class="content-text" style="margin-top: 15px; padding-left: 20px;">
        <li>服务器设备</li>
        <li>网络交换设备</li>
        <li>安全监控设备</li>
        <li>办公自动化设备</li>
      </ul>
    </div>
    <div class="content-pane" id="consulting-pane">
      <h2 class="content-title">咨询服务</h2>
      <p class="content-text">
        我们提供专业的IT咨询服务，帮助企业制定技术战略和发展规划。
      </p>
      <ul class="content-text" style="margin-top: 15px; padding-left: 20px;">
        <li>IT战略规划</li>
        <li>系统架构设计</li>
        <li>技术选型咨询</li>
        <li>项目管理咨询</li>
      </ul>
    </div>
    <div class="content-pane" id="contact-pane">
      <h2 class="content-title">联系我们</h2>
      <p class="content-text">
        如果您对我们的服务感兴趣或有任何问题，请随时联系我们：
      </p>
      <div class="content-text" style="margin-top: 15px;">
        <p><strong>邮箱：</strong>contact@example.com</p>
        <p><strong>电话：</strong>+86 123 4567 8900</p>
        <p><strong>地址：</strong>中国某市某区某街道123号</p>
      </div>
      <p class="content-text" style="margin-top: 15px;">
        我们期待与您的合作！
      </p>
    </div>
  </div>
</div>

<script>
  // 获取所有需要的DOM元素
  const sidebarItems = document.querySelectorAll('.sidebar-item');
  const sidebarSubitems = document.querySelectorAll('.sidebar-subitem');
  const contentPanes = document.querySelectorAll('.content-pane');
  const sidebarSlider = document.getElementById('sidebarSlider');
  const optionButtons = document.querySelectorAll('.option-btn');
  const submenuItems = document.querySelectorAll('[data-submenu]');

  // 初始化滑块位置
  function initSlider() {
    const activeItem = document.querySelector('.sidebar-item.active') ||
            document.querySelector('.sidebar-subitem.active');
    if (activeItem) {
      updateSliderPosition(activeItem);
    }
  }

  // 更新滑块位置和大小的函数
  function updateSliderPosition(activeItem) {
    const itemHeight = activeItem.offsetHeight;
    const itemTop = activeItem.offsetTop;

    // 使用transform来平滑移动滑块
    sidebarSlider.style.transform = `translateY(${itemTop}px)`;
    sidebarSlider.style.height = `${itemHeight}px`;
  }

  // 切换侧边栏菜单项的函数
  function switchSidebarItem(clickedItem) {
    // 移除所有sidebar-item和sidebar-subitem的active类
    sidebarItems.forEach(item => item.classList.remove('active'));
    sidebarSubitems.forEach(item => item.classList.remove('active'));
    // 为点击的item添加active类
    clickedItem.classList.add('active');

    // 隐藏所有内容面板
    contentPanes.forEach(pane => pane.classList.remove('active'));
    // 显示对应的内容面板
    const paneId = clickedItem.getAttribute('data-pane');
    const targetPane = document.getElementById(`${paneId}-pane`);
    if (targetPane) {
      targetPane.classList.add('active');
    }

    // 更新滑块位置
    updateSliderPosition(clickedItem);
  }

  // 切换动画效果的函数
  function switchAnimation(effect) {
    // 移除所有动画类
    sidebarSlider.className = 'sidebar-slider';
    // 添加新的动画类
    sidebarSlider.classList.add(effect);

    // 更新按钮状态
    optionButtons.forEach(btn => btn.classList.remove('active'));
    document.querySelector(`[data-effect="${effect}"]`).classList.add('active');
  }

  // 切换子菜单显示/隐藏
  function toggleSubmenu(submenuId) {
    const submenu = document.getElementById(submenuId);
    submenu.classList.toggle('open');
  }

  // 为每个侧边栏菜单项添加点击事件监听器
  sidebarItems.forEach(item => {
    item.addEventListener('click', (e) => {
      e.preventDefault();
      // 如果是带有子菜单的项，切换子菜单
      const submenuId = item.getAttribute('data-submenu');
      if (submenuId) {
        toggleSubmenu(`${submenuId}-submenu`);
      } else {
        // 否则切换内容面板
        switchSidebarItem(item);
      }
    });
  });

  // 为每个子菜单项添加点击事件监听器
  sidebarSubitems.forEach(item => {
    item.addEventListener('click', (e) => {
      e.preventDefault();
      switchSidebarItem(item);
    });
  });

  // 为每个动画选项按钮添加点击事件监听器
  optionButtons.forEach(btn => {
    btn.addEventListener('click', () => {
      const effect = btn.getAttribute('data-effect');
      switchAnimation(effect);
    });
  });

  // 窗口大小改变时重新计算滑块位置
  window.addEventListener('resize', () => {
    const activeItem = document.querySelector('.sidebar-item.active') ||
            document.querySelector('.sidebar-subitem.active');
    if (activeItem) {
      updateSliderPosition(activeItem);
    }
  });

  // 页面加载完成后初始化滑块
  document.addEventListener('DOMContentLoaded', () => {
    initSlider();
  });
</script>
</body>
</html>